<template>
	<!-- <view class="flex align-center" style="display: flex; justify-content: space-between; align-items: center; width: 100%; height: 100%;"> -->
	<view class="flex align-center" style="position: relative; width: 100%; height: 100%;">
		<picker
			mode="selector"
			:range="dates"
			range-key="name"
			@change="changDateType"
			style="position: absolute; top: 50%; left: 0; transform: translateY(-50%);"
		>
			<view class="picker" style="padding: 0;">
				<view class="padding-right-xs">{{dateType>=0?dates[dateType].name:'自定义'}}</view>
				<tui-icon name="turningdown" :size="20" color="#666"></tui-icon>
			</view>
		</picker>
		<view  style="display: flex; align-items: center; position: absolute; top: 50%; right: 0; transform: translateY(-50%);">
			<view class="padding-right-xs flex" style="display: flex;">
				<picker mode="date" @change="changStart" :end="maxEnd">
					<view style="font-weight: bold;">{{start}} </view>
				</picker>
				<text class="padding-lr-sm" style="margin: 0 10rpx;">—</text>
				<picker mode="date" @change="changEnd" :end="maxEnd">
					<view style="font-weight: bold;">{{end}} </view>
				</picker>
			</view>
			<tui-icon @click="showCalendar" name="calendar" color="#ef6544" :size="18" style="margin-left: 28rpx;" />
		</view>
		
		
		<tui-calendar activeBgColor="#f42f3c" btnType="theme" rangeColor="#f42f3c" rangeBgColor="rgba(255,84,9,0.1)" @change="changeCalendar" ref="calendar" isFixed :type="2" :initStartDate="start" :initEndDate="end"></tui-calendar>
		
	</view>
</template>

<script>
import utils from '@/components/common/tui-utils/tui-utils';
export default {
	name: '',
	data() {
		return {
			maxEnd:utils.formatDate('y-m-d', new Date(),4),
			dateType:0,
			dates: [
				{
					name:'今日',
					value:this.getDistaceDays('今日'),
				},
				{
					name:'本周',
					value:this.getDistaceDays('本周'),
				},
				{
					name:'本月',
					value:this.getDistaceDays('本月'),
				},
				{
					name:'本季度',
					value:this.getDistaceDays('本季度'),
				},
				{
					name:'本年',
					value:this.getDistaceDays('本年'),
				},
				
			],
			start:utils.formatDate('y-m-d', new Date(),4),
			end:utils.formatDate('y-m-d', new Date(),4),
		};
	},
	mounted() {
		// console.log(utils.formatDate('y-m-d', new Date(),4))
		this.dateType = 1
		let e = {detail:{value:1}}
		this.changDateType(e)
	},

	methods: {
		changeCalendar(e){
			console.log(e)
			this.start = e.startDate;
			this.end = e.endDate
			this.comparDateTpye()
			this.$emit('change',[this.start,this.end])
		},
		showCalendar(){
			this.$refs.calendar.show();
		},
		changDateType(e){
			let index = e.detail.value;
			let dates = this.dates[index].value;
			this.dateType = index;
			this.start = dates[0];
			this.end = dates[1];
			this.$emit('change',[this.start,this.end])
		},
		getDistaceDays(type) { //获取天数
			let formatDate = utils.formatDate;
		  let beginDate, endDate;
		  let now = new Date();
		  let nowDayOfWeek = now.getDay(); //今天本周的第几天
		  let nowDay = now.getDate(); //当前日
		  let nowMonth = now.getMonth(); //当前月
		  let nowYear = now.getFullYear(); //当前年
		  let jd = Math.ceil((nowMonth + 1) / 3)
		  if (type == '其他') {
		    return ['', '']
		  } else if (type == '今日') {
		    return [formatDate('y-m-d',now,4), formatDate('y-m-d',now,4)]
		  } else if (type == '本周') {
		    beginDate = new Date(nowYear, nowMonth, nowDay - nowDayOfWeek)
		    endDate = new Date(nowYear, nowMonth, nowDay + 6 - nowDayOfWeek)
		  } else if (type == '本月') {
		    beginDate = new Date(nowYear, nowMonth, 1)
		    endDate = new Date(nowYear, nowMonth + 1, 0)
		  } else if (type == '本季度') {
		    beginDate = new Date(nowYear, (jd - 1) * 3, 1)
		    endDate = new Date(nowYear, jd * 3, 0)
		  } else if (type == '本年') {
		    beginDate = new Date(nowYear, 0, 1)
		    endDate = new Date(nowYear, 11, 31)
		  }
		  return [formatDate('y-m-d',beginDate,4), formatDate('y-m-d',endDate,4)]
		},
		comparison(val,type){
			let flag = true;
			let a = val.replace(/\-/g,'/')
			let other = type=='start'?'end':'start';
			let b = this[other].replace(/\-/g,'/')
			if(type=='start'){
				if(new Date(a)> new Date(b)){
					this.tui.toast('开始时间要小于结束时间')
					flag = false
				}
			}else{
				if(new Date(a)< new Date(b)){
					this.tui.toast('结束时间要大于开始时间')
					flag = false
				}
			}
			return flag
		},
		comparDateTpye(){
			let current = [this.start,this.end].toString()
			let index = this.dates.findIndex(v=> current == v.value.toString())
			this.dateType =index
		},
		changStart(e) {
			if(!this.comparison(e.detail.value,'start')){
				return
			}
			this.start = e.detail.value;
			this.comparDateTpye()
			this.$emit('change',[this.start,this.end])
		},
		changEnd(e) {
			if(!this.comparison(e.detail.value,'end')){
				return
			}
			this.end = e.detail.value
			this.comparDateTpye()
			this.$emit('change',[this.start,this.end])
		},
	},
};
</script>

<style lang="scss" scoped>
	.picker {
		display: flex;
		align-items: center;
		padding: 16rpx 32rpx;
		background: rgba(255, 255, 255, 0.12);
		border-radius: 50rpx;
		margin-right: 30rpx;
	}
</style>